<template>
    <canvas ref="myCanvas" id="myCanvas" width="1200" height="800"></canvas>
</template>

<script>
export default {
name: 'myCanvas',
props: {
 items: []
},
data() {
 return{
     cvs:null,
     cts:null,
     switch_radius:5,
     switch_dist:3,
     interval:5
   }
 },
   mounted(){
    this.cvs=this.$refs.myCanvas;
     this.ctx = this.cvs.getContext('2d');
     this.drawItems(this.items);
     /*
     // 添加鼠标点击事件监听器
     this.cvs.addEventListener('mousedown', function(e) {
    // 获取鼠标点击的坐标
    var mouseX = e.pageX - canvas.offsetLeft;
    var mouseY = e.pageY - canvas.offsetTop;
    this.checkMouseClick(mouseX,mouseY);
  
    });
    */
    this.startThread();
 },
 methods: {
    startThread(){
        setInterval(this.doDrawing,this.interval*1000);
    },
    doDrawing(){
        this.drawItems(this.items);
    },
   drawItems(itemList){
     for(var i=0;i<itemList.length;i++){
       this.drawItem(itemList[i]);
     }
   },
   drawItem(item) {
   if(item==null) return;
   
     switch(item.itemType){
       case "rect":
         this.drawRect(item);
         break;
       case "line":
         this.drawline(item);
         break;
       case "circle":
         this.drawCircle(item);
         break;
       case 'switch':
         this.drawSwtich(item);
         break;
        case 'arrow':
         this.drawArrow(item);
         break;
     }
   },
   drawText(text,posX,posY,color){
    
     this.ctx.beginPath();
     this.ctx.font = "10pt 隶书"
     this.ctx.fillStyle="#ff0000";
     this.ctx.fillText(text,posX,posY);
    //  if(color!=null){
    //     this.ctx.fillStyle=color;
    //     this.ctx.fill();
    //  }else{
    //     this.ctx.fillStyle="#ff0000";
    //     this.ctx.fill();
    //  }

        this.ctx.closePath()
        this.ctx.stroke();
   },
   drawRect(item){
       this.ctx.beginPath();
     this.ctx.rect(item.left,item.top,item.width,item.height);
     if(item.color!=null){
        this.ctx.fillStyle=item.color;
        this.ctx.fill();
     }
     this.ctx.closePath()
     this.ctx.stroke();
     if(item.sid!=null){
     this.drawText(item.sid,item.left+1,item.top+item.height/2,null);
     }
   },
   drawline(item){
       this.ctx.beginPath();
       this.ctx.moveTo(item.left,item.top);
       this.ctx.lineTo(item.endLeft,item.endTop);
   
     this.ctx.closePath()
     this.ctx.stroke();
     if(item.arrow){
        var direct=0;
        if(item.top==item.endTop){
            if(item.endLeft>item.left){
                direct=1;
            }else{
                direct=3;
            }
        }else{
            if(item.top<item.endTop){
                direct=2;
            }else{
                direct=4;
            }
        }
        var arritem={
            left:item.endLeft,
            top:item.endTop,
            direction:direct,
            color:item.color
        };
        this.drawArrow(arritem);
     }
   },
   drawCircle(item){
     this.ctx.beginPath();
     this.ctx.arc(item.left,item.top,item.radius,0, Math.PI * 2, false)
     if(item.color!=null){
        this.ctx.fillStyle=item.color;
        this.ctx.fill();
     }
     this.ctx.closePath();
     this.ctx.stroke();
   },
   drawSwtich(item){
     var x=item.left;
     var y=item.top;
     var radius=this.switch_radius;
     var dist=this.switch_dist;
     var direct=item.direction;
     var dx=0;
     var dy=0;
     var rx=0;
     var ry=0;
     let textTop=item.top-this.switch_radius-10;
     let textLeft=item.left+this.switch_radius;
     if(direct==2 || direct==4){
         dx=dist;
         dy=0;
         rx=radius;
         ry=0;
         textLeft=item.left+this.switch_radius*2;
         textTop=item.top-this.switch_radius;
     }else{
         dx=0;
         dy=dist;
         rx=0
         ry=radius;
         textTop=item.top-this.switch_radius*2-5;
       
     }
     
     var subItems=[
         {
         itemType:'line',
         top:y,
         left:x,
         endTop:y-dy,
         endLeft:x-dx,
         width:1,
         color:'blue'
         },
         {
             itemType:'circle',
             top:y-dy-ry,
             left:x-dx-rx,
             radius:radius,
             color:(item.state==1?'#fff':(item.state==0?'#3e3e3e':'#ff0000'))
         },
         {
             itemType:'line',
             top:y,
             left:x,
             endTop:y+dy,
             endLeft:x+dx,
             width:1,
             color:'blue'
         },
         {
             itemType:'circle',
             top:y+dy+ry,
             left:x+dx+rx,
             radius:radius,
             //color:'blue'
             color:(item.state==0?'#ffffff':'#3e3e3e')
         },
   ];
   this.drawItems(subItems)
   if(item.arrow){
    this.drawArrow(item);
   }
  
   if(item.sid!=null){
   this.drawText(item.sid,textLeft,textTop,null);
   }
 },
 drawArrow(item){
    let x=item.left;
    let y=item.top;
    let direct=item.direction;
    let unit=5;
    let dx=0;
    let dy=0;
    let pot1=[x,y];
    let pot2;
    let pot3;
    let pot4;
    switch(direct){
        case 1://右
            x=x+unit*2;
            pot2=[x,y-unit];
            pot3=[x+unit*2,y];
            pot4=[x,y+unit];
            break;
        case 2://下
            y=y+unit*2;
            pot2=[x+unit,y];
            pot3=[x,y+unit*2];
            pot4=[x-unit,y];
            break;
        case 3://左
            x=x-unit*2;
            pot2=[x,y-unit];
            pot3=[x-unit*2,y];
            pot4=[x,y+unit];
            break;
        case 4://上
           y=y-unit*2;
            pot2=[x+unit,y];
            pot3=[x,y+-unit*2];
            pot4=[x-unit,y];
            break;
    }
    this.ctx.beginPath();
    this.ctx.moveTo(pot1[0],pot1[1]);
    this.ctx.lineTo(x,y);
    this.ctx.moveTo(x,y);
    this.ctx.lineTo(pot2[0],pot2[1]);
    this.ctx.moveTo(pot2[0],pot2[1]);
    this.ctx.lineTo(pot3[0],pot3[1]);
    this.ctx.moveTo(pot3[0],pot3[1]);
    this.ctx.lineTo(pot4[0],pot4[1]);
    this.ctx.moveTo(pot4[0],pot4[1]);
    this.ctx.lineTo(x,y);
    if(item.color!=null){
        this.ctx.fillStyle=item.color;
        this.ctx.fill();
     }
     this.ctx.closePath();
     this.ctx.stroke();

 },
 checkMouseClick(x,y){
    for(var i=0;i<this.items.length;i++){
        let item=this.items[i];
        if(item.itemstyle=='rect'){
            if(x>=item.left && x<=item.left+item.width){
                if(y>=item.top && y<=item.top+item.height){
                    //鼠标点击rect
                }
                
            }
        }
        if(item.itemstyle=='switch'){
            if(item.direction==1 || item.direction==3){
                let x1=item.left-this.switch_dist;
                let x2=item.left+this.switch_dist;
                let y1=item.top-this.switch_dist-this.switch_radius*2;
                let y2=item.top+this.switch_dist+this.switch_radius*2;
                if(x>=x1 && x<=x2){
                    if(y>=y1 && y<=y2){
                        //鼠标点击switch
                    }
                }
            }else{
                let x1=item.left-this.switch_dist-this.switch_radius*2;
                let x2=item.left+this.switch_dist +this.switch_radius*2;
                let y1=item.top-this.switch_dist ;
                let y2=item.top+this.switch_dist;
                if(x>=x1 && x<=x2){
                    if(y>=y1 && y<=y2){
                        //鼠标点击switch
                    }
                }
            }
        }
    }
 }
 }
}
</script>